<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<c:set var="appRoot" value="/livePlatform"></c:set>
<!DOCTYPE html>
<!--[if lt IE 7 ]><html class="ie ie6"><![endif]-->
<!--[if IE 7 ]><html class="ie ie7"><![endif]-->
<!--[if IE 8 ]><html class="ie ie8"><![endif]-->
<!--[if IE 9 ]><html class="ie ie9"><![endif]-->
<!--[if (gt IE 9)|!(IE)]><!--><html><!--<![endif]-->
<head>
	<meta charset="utf-8">
	<meta name="renderer" content="webkit" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<meta name="viewport" content="initial-scale=1,minimum-scale=1" />
	<title>中奖名单</title>
    <c:import url="${appRoot}/public/head-tag.jsp"/>
    <style>
	.ellipsis {
	    white-space: nowrap;
	    overflow: hidden;
	    text-overflow: ellipsis;
	    max-width: 250px;
	}
    </style>
</head>
<body>
    <c:import url="${appRoot}/public/header.jsp"/>
    <section class="container">
    	
		<section class="sidebar">
		    <c:set var="sidebar" scope="request" value="extension"/>
	    	<c:set var="navbar" scope="request" value="form-editor"/>
		    <c:import url="${appRoot}/public/sidebar.jsp"/>
		</section>
		
   	<div class="content">
    		<div class="content-top">
    			<h3 class="content-title">幸运转盘-》中奖名单</h3>
    			<h5 v-text="form.title"></h5>
    		</div>
    		<div class="content-main">
				<section class="content-item" data-template="item/list" id="box">
					<div class="content-item-top">
						<div class="item-toolbar">
							<div class="fn-right">
                               <a id="exportDoc" href="/Manager/web/lottery/exportExcel?id={{form.id}}&title={{form.title}}" target="_blank" class="btn btn-default btn-medium">导出excel</a>    			  
                            </div>
						</div> 
						<form action="/Manager/web/lottery/exportSearch" method="get" autocomplete="off">
							
							<div class="filter-item">
								<label for="">时间</label>
								<input type="text" class="text text-100" placeholder="开始时间" name="sdate" datepicker="datetime"/>
								<span>至</span>
								<input type="text" class="text text-100" placeholder="结束时间"  name="edate" datepicker="datetime"/>
							</div>
							
                            <div class="filter-item">
								<label for="">中奖状态</label>
								<select name="status" class="select">
									<option value="">所有</option>
									<option value="1">已中奖</option>
									<option value="0">未中奖</option>
								</select>
							</div>
							
							<div class="filter-item">
								<label for="">搜索</label>
								<input type="submit" class="btn btn-search"  value="搜索" id="search-button"/>
								<input type="hidden" name="page" value="1"/>
								<input type="hidden" name="id"   value="{{form.id}}"/>
							</div>
						</form>
					</div>
					
					<div class="content-item-block">
							<table class="table">
								<thead>
								<tr>
									<th style="width:25%">姓名</th>
									<th style="width:25%">手机号</th>
									<th style="width:25%">奖项</th>
									<th style="width:25%">中奖时间</th>
								</tr>
								</thead>
								<tbody id="sortable">
									<tr>
										<td class="align-center" colspan="6">
											<div class="loading">加载中...</div>
										</td>
									</tr>
								</tbody>
							</table>
					</div>
					
				</section>
    		</div>
    	</div>
    </section>
    
     <script type="text/html"  id="action/info" note="统计信息">
		{{if data}}
			<dl class="action-fields">
				<dt>报名字段：</dt>
				{{each data.headlist}}
				<dd>{{$value.title}} {{if $index!==data.headlist.length-1}}，{{/if}}</dd>
				{{/each}}
			</dl>
			<dl class="action-fields">
			<dt>中奖信息：</dt>
			<dd>中奖总数：<b>{{data.signcount}}</b> ,</dd>
			<dd>一等奖：<b class="color-green">{{data.paycount}}</b> ,</dd>
			<dd>二等奖：<b class="color-red">{{data.notpaycount}}</b> ,</dd>
			<dd>三等奖：<b class="color-blue">{{data.scanningcount}}</b></dd>
			</dl>
			{{else}}{{msg || '查询出错'}}
		{{/if}}
   </script>
   
	<script type="text/template"  id="item/list" note="抽奖信息列表">
        {{if !code }}
        <tr>
            <td colspan="8" class="color-red">服务器错误！</td>
        </tr>
        {{else if code!=200}}
        <tr>
            <td colspan="8" class="color-red">{{data.msg || '查询错误！'}}</td>
        </tr>
        {{else if !data || data.length==0}}
        <tr>
            <td colspan="8">没有记录！</td>
        </tr>
		{{else}}
			{{each data.datalist as item}}
				<tr>
					<td>{{item.username}}</td>					
					<td>{{item.phone}}</td>
					<td>{{item.prizename}}</td>
					<td>
						<p>{{item.t | dateFormat:'yyyy-MM-dd'}} </p>
						<p class="value-note">{{item.t | dateFormat:'HH:mm'}}</p>
					</td>
				</tr>
			{{/each}}
		{{/if}}
    </script>
    
    <script src="${appRoot}/assets/js/require.all.js"></script>
    <script>
   		requirejs([
            'vue', 
            'artTemplate', 
            'artDialog',

            'vender.actions', 
            'utils.converter', 
            'utils.search', 
            
            'vender.datetimepicker', 
            'jquery.md5', 
            'jquery.ajaxsubmit',
            'jquery.formcheck',
            'jquery.common',
            'jquery.pager'
        ], 
        
        function(Vue, template, dialog, Action, Converter, Search, DateTimePicker){
   			
        	var search = new Search().getParams()
        	
        	Action.extend({
                'form.detail' : '/Manager/web/action/detail?id={data}'
            })
        	
    		var App={
    			alert : function(){
    				alert(arguments[0]);
    			},
    			
    			
    			getAppData :function(){
                    var dtd = $.Deferred();
                    var url = Action.get('form.detail',search.id);
                    $.getJSON(url, function(result){
                        var code = result.code;
                        if(code==200){
                            dtd.resolve(result)
                        }else{
                            var msg = result.msg || '数据获取失败！';
                            dtd.reject(msg)
                        }
                    })
                    .fail(function(e, type, msg){
                        dtd.reject(type + msg)
                    })
                    return dtd;
                },
    			initApp:function(appData){
                    new Vue({
                        el:'body',
                        data:function(){
                        	return appData
                        },
                        computed:{
                            'form':function(){
                            	return appData;
                            }
                        },
                    })
                },
                
    			init : function(){

                    var app = this;
                    DateTimePicker('[datepicker]');
                    app.getAppData().then(function(data){
                        app.initApp(data);
						$("[data-template]").ajaxLoad({
                            dataFilter:function(){
                                return data;
                            },
                            beforeSubmit:function(){
                            var $this=$(this);
                            var data=$this.serialize();
                            var $exportDoc=$("#exportDoc");
                            $exportDoc.attr("href",$exportDoc.data("href")+data);
                        }
                        });
                    })
                }
    		}
    		App.init();
   		})
    </script>
    </body>
</html>